<link rel="stylesheet" href="__CDN__/assets/addons/sum/libs/element/element.css">
<style>
    #storeDetail {
        background: #fff;
        border-radius: 10px 10px 0px 0px;
        height: calc(100vh - 66px);
        color: #666;
        font-weight: 500;
    }
    .sum-add-image {
        width: 60px;
        height: 60px;
        border-radius: 4px;
        border: 1px solid #e6e6e6;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
    }

    .sum-select-item {
        position: relative;
    }

    .sum-select-item-container {
        display: flex;
        align-items: center;
    }

    .sum-select-item-id {
        width: 70px;
    }

    .sum-select-item-image {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        margin: 0 30px;
    }

    .sum-select-item-name {
        width: 80px;
    }

    .sum-select-item-page {
        position: sticky;
        background: #fff;
        height: 28px;
        top: 0;
        z-index: 1
    }

    .sum-select-item-page .pagination {
        margin: 0;
    }
    .btn-common {
        width: 88px;
        height: 32px;
        line-height: 30px;
        border-radius: 4px;
        font-size: 12px;
        text-align: center;
        cursor: pointer;
        display: inline-block;
    }

    .display-flex {
        display: flex;
        align-items: center;
    }

    .el-radio__input.is-checked+.el-radio__label,
    .el-checkbox__input.is-checked+.el-checkbox__label {
        color: #7438D5;
    }

    .el-radio__input.is-checked .el-radio__inner,
    .el-checkbox__input.is-checked .el-checkbox__inner,
    .el-checkbox__input.is-indeterminate .el-checkbox__inner {
        background: #7438D5;
        border-color: #7438D5;
    }

    .el-radio {
        color: #666;
    }

    label {
        margin-bottom: 0;
    }

    .el-cascader {
        width: 100%;
    }

    .el-form-item__label {
        color: #444;
        font-size: 13px;
        font-weight: 500;
    }

    .form-bodys {
        height: calc(100vh - 100px);
        overflow-y: auto;
        padding-right: 20px;
    }

    .form-bodys::-webkit-scrollbar {
        width: 6px;
    }

    .form-bodys::-webkit-scrollbar-thumb {
        width: 6px;
        background: #e6e6e6;
        height: 20px;
        border-radius: 3px;
    }

    .form-custom-title {
        width: 90px;
        height: 30px;
        line-height: 30px;
        margin-right: 12px;
        text-align: right;
        color: #444;
        font-size: 13px;
    }

    .form-map {
        width: 100%;
        height: 400px;
        border: 1px solid #DCDFE6;
        border-radius: 4px;
        padding: 10px;
        position: relative;
    }

    .form-custom-container {
        display: flex;
        justify-content: space-between;
    }

    .form-custom-body {
        flex: 1;
    }

    .form-custom-container-item {
        margin-bottom: 15px;
        display: flex;
        align-items: center;
    }

    #mapArea {
        height: 380px
    }

    .form-tip {
        color: #999;
        margin-left: 24px;
    }

    .page-footer {
        padding: 20px 10px 0;
        justify-content: flex-end;
    }

    .footer-btn-1 {
        color: #7438D5;
        line-height: 36px;
    }

    .footer-btn-2 {
        width: 90px;
        height: 36px;
        background: #7438D5;
        border-radius: 4px;
        font-size: 16px;
        color: #fff;
        line-height: 36px;
        border-radius: 18px;
    }

    .el-input-group__append,
    .el-input-group__prepend {
        padding: 0 10px;
    }

    .user-container {
        flex: 1;
    }

    .user-container .el-select {
        width: 100%;
    }

    .user-container .el-select .el-select__input,
    .user-container .el-select .el-select__input:focus {
        border: none !important;
        height: 20px;
    }

    .el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
        color: #7438D5;
    }

    .radius-container {
        width: 160px;
    }

    .edit-area-btn {
        color: #7438D5;
        cursor: pointer;
    }

    .pagination {
        margin: 0;
    }

    .el-pagination__sizes {
        display: none !important;
    }

    .text-normal {
        padding: 0 10px;
    }

    .el-pagination__jump {
        margin-left: 8px;
    }

    .add-img {
        width: 60px;
        height: 60px;
        border: 1px dashed #E6E6E6;
        border-radius: 4px;
        justify-content: center;
    }

    .goods-images {
        width: 60px;
        height: 60px;
        border-radius: 4px;
        position: relative;
        border: 1px solid #7438D5;
        margin-right: 10px;
        margin-bottom: 10px;
    }

    .label-auto {
        width: 100%;
        height: 100%;
    }

    .del-image-btn {
        position: absolute;
        width: 14px;
        height: 14px;
        line-height: 14px;
        text-align: center;
        border-radius: 50%;
        font-size: 12px;
        font-weight: 600;
        background: #7438D5;
        color: #fff;
        top: -7px;
        right: -7px;
    }

    .image-slot {
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    [v-cloak] {
        display: none
    }
</style>
<script src="__CDN__/assets/addons/sum/libs/vue.js"></script>
<script src="__CDN__/assets/addons/sum/libs/element/element.js"></script>
<script src="__CDN__/assets/addons/sum/libs/Sortable.min.js"></script>
<script src="__CDN__/assets/addons/sum/libs/vuedraggable.js"></script>
<script src="__CDN__/assets/addons/sum/libs/moment.js"></script>
<script type="text/javascript">
    window._AMapSecurityConfig = {
        securityJsCode: "{notempty name='amap.securityJsCode'}{$amap['securityJsCode']}{/notempty}",
    }
</script>
<script
    src="https://webapi.amap.com/maps?v=1.4.15&key={notempty name='amap.appkey'}{$amap['appkey']}{/notempty}&plugin=AMap.CircleEditor,AMap.Geocoder,AMap.Autocomplete,AMap.PlaceSearch">
    </script>

<div id="storeDetail" v-cloak>
    <div class="form-bodys">
        <el-form :model="storeForm" ref="storeForm" :rules="rules" label-width="114px" class="demo-storeForm">
            <el-form-item label="油站名称：" prop="name">
                <el-input v-model="storeForm.name" placeholder="请输入油站名称" size="medium"></el-input>
            </el-form-item>

            <el-form-item label="绑定打印机：" prop="printer_id">
                <div class="sum-select-container">
                    <el-select class="sum-select-item" v-model="storeForm.printer_id" filterable placeholder="请选择打印机"
                               :filter-method="dataFilter" size="small">
                        <el-option  label="请选择" value="0">
                            <div class="sum-select-item-container">
                                <div class="sum-select-item-name ellipsis-item">请选择</div>
                            </div>
                        </el-option>
                        <el-option v-for="item in printerList" :key="item.id" :label="item.title" :value="item.id">
                            <div class="sum-select-item-container">
                                <div class="sum-select-item-id">{{ item.id }}</div>
                                <div class="sum-select-item-name ellipsis-item">{{ item.title }}</div>
                            </div>
                        </el-option>
                        <div class="sum-select-item-page">
                            <div class="text-normal display-flex" style="justify-content: center;">
                                <el-pagination class="pagination" :current-page="currentPage" :total="totalPage"
                                               layout="total, prev, pager,next" pager-count="5" @current-change="pageCurrentChange" />
                                </el-pagination>
                            </div>
                        </div>
                    </el-select>
                </div>
            </el-form-item>

<!--            <el-form-item label="添加管理员：" prop="user_ids" style="height: auto;">-->
<!--                <div class="display-flex">-->
<!--                    <div class="user-container">-->
<!--                        <el-select style="position: relative;" v-model="storeForm.user_ids" multiple filterable-->
<!--                                   size="medium" placeholder="" :filter-method="dataFilter" @visible-change="changeUser">-->
<!--                            <el-option v-for="item in aboutUserOptions" v-if="item" :key="item.id"-->
<!--                                       :label="item.nickname" :value="item.id">-->
<!--                                <div class="display-flex" style="justify-content: space-around;">-->
<!--                                    <span>{{ item.id }}</span>-->
<!--                                    <div style="width: 24px;">-->
<!--                                        <img v-if="item.avatar" style="width:24px;height:24px;border-radius:50%;"-->
<!--                                             :src="Fast.api.cdnurl(item.avatar)">-->
<!--                                    </div>-->
<!--                                    <div style="width: 80px;">{{ item.nickname }}</div>-->
<!--                                    <div style="width: 90px;">-->
<!--                                        <div style="width: 90px;" v-if="item.mobile">{{ item.mobile }}</div>-->
<!--                                        <div style="width: 90px;text-align: center;" v-else>-</div>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </el-option>-->
<!--                            <div class="text-center"-->
<!--                                 style="position: sticky;background: #fff;height:28px;top:0;z-index:1">-->
<!--                                <div class="text-normal display-flex" style="justify-content: center;">-->
<!--                                    <el-pagination class="pagination" :page-sizes="[6]" :current-page="currentPage"-->
<!--                                                   :total="totalPage" layout="total, sizes, prev, pager,next, jumper"-->
<!--                                                   pager-count="5" @size-change.stop="pageSizeChange"-->
<!--                                                   @current-change="pageCurrentChange" />-->
<!--                                    </el-pagination>-->
<!--                                    <div style="cursor: pointer;color: #7438D5;margin-left: 8px;" @click="getUser">确定-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </el-select>-->
<!--                    </div>-->
<!--                    <div class="form-tip">在关联用户时请务必成为本系统用户</div>-->
<!--                </div>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="绑定管理员：" prop="admin_id">-->
<!--                <div class="sum-select-container">-->
<!--                    <el-select class="sum-select-item" v-model="storeForm.admin_id" filterable placeholder="请选择管理员"-->
<!--                               :filter-method="dataFilter" size="small">-->
<!--                        <el-option v-for="item in adminList" :key="item.nickname" :label="item.nickname" :value="item.id">-->
<!--                            <div class="sum-select-item-container">-->
<!--                                <div class="sum-select-item-id">{{ item.id }}</div>-->
<!--                                <img class="sum-select-item-image" :src="Fast.api.cdnurl(item.avatar)">-->
<!--                                <div class="sum-select-item-name ellipsis-item">{{ item.nickname }}</div>-->
<!--                                <div class="sum-select-item-name ellipsis-item">{{ item.storename }}</div>-->
<!--                            </div>-->
<!--                        </el-option>-->
<!--                        <div class="sum-select-item-page">-->
<!--                            <div class="text-normal display-flex" style="justify-content: center;">-->
<!--                                <el-pagination class="pagination" :current-page="currentPage" :total="totalPage"-->
<!--                                               layout="total, prev, pager,next" pager-count="5" @current-change="pageCurrentChange" />-->
<!--                                </el-pagination>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </el-select>-->
<!--                </div>-->
<!--            </el-form-item>-->
            <el-form-item label="油站图片：" prop="images">
                <div class="display-flex" style="flex-wrap: wrap;">
                    <div class="goods-image-box display-flex" v-if="timeData.images_arr">
                        <draggable class="display-flex" :list="timeData.images_arr" v-bind="$attrs"
                            :options="{animation:500}">
                            <div class="goods-images" v-for="(it,index) in timeData.images_arr"
                                @click="addImg(index,false)">
                                <el-image class="label-auto" :src="Fast.api.cdnurl(it)" fit="cover">
                                    <div slot="error" class="image-slot">
                                        <i class="el-icon-picture-outline"></i>
                                    </div>
                                </el-image>
                                <div class="del-image-btn" @click.stop="delImg(index)">
                                    <img class="label-auto" src="/assets/addons/sum/img/goods/close.png">
                                </div>
                            </div>
                        </draggable>
                    </div>
                    <div class="add-img display-flex" @click="addImg(null,true)" style="margin-right: 30px;"
                        v-if="9>isAddImage">
                        <i class="el-icon-plus"></i>
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="联系人：" prop="realname">
                <el-input v-model="storeForm.realname" placeholder="请输入联系人" size="medium"></el-input>
            </el-form-item>
            <el-form-item label="联系电话：" prop="phone">
                <el-input v-model="storeForm.phone" placeholder="请输入联系电话" size="medium"></el-input>
            </el-form-item>
            <el-form-item label="营业类型：" prop="service_type">
                <div class="display-flex" style="height: 100%;">
                    <div>
                        <el-radio-group v-model="storeForm.service_type">
                            <el-radio label="1">24小时</el-radio>
                            <el-radio label="2">自定义</el-radio>
                        </el-radio-group>
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="营业时间：" prop="openhours" v-if="storeForm.service_type==2">
                <div class="display-flex">
                    <el-time-picker size="small" value-format="HH:mm" format="HH:mm" is-range @change="changeTime"
                                    v-model="timeData.openhours_arr" range-separator="至" start-placeholder="开始时间"
                                    end-placeholder="结束时间" placeholder="选择时间范围">
                    </el-time-picker>
                </div>
            </el-form-item>

            <el-form-item label="油站状态：" prop="status">
                <div class="display-flex" style="height: 40px;">
                    <el-switch v-model="storeForm.status" active-value="1" inactive-value="0" active-color="#7438D5"
                        inactive-color="#eee">
                    </el-switch>
                    <div style="margin-left: 20px;">
                        {{storeForm.status==1?'启用':'禁用'}}
                    </div>
                </div>
            </el-form-item>
<!--            <el-form-item label="每升最大优惠：" prop="discount_max">-->
<!--                <el-input v-model="storeForm.discount_max" placeholder="请输入每升最大优惠" size="medium"></el-input>-->
<!--                <div>（每升最大优惠）*升数/3=每个坑位的优惠</div>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="激活所需：" prop="need_count">-->
<!--                <el-input v-model="storeForm.need_count" placeholder="请输入第三优惠激活所需人数" size="medium"></el-input>-->
<!--            </el-form-item>-->
            <el-form-item label="油站地址：" prop="store_address">
                <div class="display-flex">
                    <el-cascader v-model="storeForm.store_address" separator="-" :props="{value:'name'}"
                                 :options="areaOptions" @change="areaOptionsChange">
                    </el-cascader>
                </div>
            </el-form-item>
            <el-form-item label="详细地址：" v-if="isAddress">
                <div class="display-flex">
                    <el-input id="tipinput" placeholder="请输入详细地址信息" @input="detailAddressFilter"
                              v-model="storeForm.address" size="medium"></el-input>
                </div>
            </el-form-item>
            <div class="form-custom-container">
                <div class="form-custom-title">详细地址：</div>
                <div class="form-custom-body">
                    <div class="form-map">
                        <div id="mapArea"></div>
                        <div
                            style="position: absolute;top: 30px;right: 30px;background: #fff;padding: 10px;border-radius: 4px;">
                            经纬度{{lnglat}}</div>
                    </div>
                </div>
            </div>
        </el-form>
    </div>
    <div class="page-footer display-flex">
        <div @click="storeSub" class="btn-common footer-btn-1">取消</div>
        <div @click="storeSub('yes','storeForm')" class="btn-common footer-btn-2">确定</div>
    </div>
</div>